<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { TabPane, Tabs } from 'ant-design-vue';

import Info from './components/info.vue';
import Mail from './components/mail.vue';
import Password from './components/password.vue';
import Systemlog from './components/systemlog.vue';

const activeKey = ref('1');
const [Modal] = useVbenModal();
</script>
<template>
  <Modal :footer="false" class="w-3/5" title="用户个人信息管理">
    <Tabs v-model:active-key="activeKey">
      <TabPane key="1" tab="个人信息">
        <Info />
      </TabPane>
      <TabPane key="2" force-render tab="邮箱配置">
        <Mail />
      </TabPane>
      <TabPane key="3" tab="修改密码">
        <Password />
      </TabPane>
      <TabPane key="4" tab="操作日志">
        <Systemlog :active-key="activeKey" />
      </TabPane>
    </Tabs>
  </Modal>
</template>
